<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card" id="card">
          <div>
            <div
              class="container-maodian flex-row-center"
              v-for="(item, index) in list"
              :key="index"
              @click="changeItem(item, index)"
              :class="
                item.name == activeIndex ? 'container-maodian-xuanzhong' : ''
              "
            >
              <svg-icon
                :style="{
                  filter: item.name == activeIndex ? '' : noSelect,
                }"
                class="wid20"
                :icon-class="item.icon"
              ></svg-icon>
              <span class="container-maodian-name">{{ item.name }}</span>
            </div>
          </div>
          <div class="container-bottom">
            <div
              class="container-maodian flex-row-center"
              v-for="(items, indexs) in list2"
              :key="indexs"
              @click="changeItem(items, indexs)"
              :class="
                items.name == activeIndex ? 'container-maodian-xuanzhong' : ''
              "
            >
              <svg-icon
                :style="{
                  filter: items.name == activeIndex ? '' : noSelect,
                }"
                class="wid20"
                :icon-class="items.icon"
              ></svg-icon>
              <span class="container-maodian-name">{{ items.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <div
          class="container-right"
          id="container"
          v-if="activeIndex != '我的应用' && activeIndex != '应用订单'"
        >
          <div v-for="(item, index) in contentList" :key="index" :id="item.id" :data-section="item.name" class="section">
            <!-- 标题 -->
            <div>
              <span style="color: #808080; font-size: 14px">应用管理</span> /
              <span style="color: #303030; font-size: 14px">{{
                item.name
              }}</span>
            </div>

            <el-row :gutter="20" class="container-right-list">
              <el-col
                :span="8"
                v-for="(items, indexs) in item.children"
                :key="indexs"
                class="container-right-list-box"
              >
                <card-box
                  :content="items"
                  @order="orders"
                  @openNativeDrawer="openNativeDrawers"
                  @openMoveDrawer="openMoveDrawers"
                  @openlittleelfDrawer="openlittleelfDrawers"
                ></card-box>
              </el-col>
            </el-row>
          </div>
          <div style="height: 500px"></div>
        </div>
        <div class="container-right2" v-else-if="activeIndex == '我的应用'">
          <div class="container-right2-title">
            <span style="color: #808080; font-size: 14px">应用管理</span> /
            <el-select
              v-model="value"
              placeholder="请选择"
              @change="changeOptions"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="container-right2-box flex-row-between">
            <div class="container-right2-box-left">应用信息</div>
            <div class="container-right2-box-left container-right2-box-right">
              操作
            </div>
          </div>
          <!-- 内容 -->
          <div
            class="container-right2-content flex-row-start"
            v-for="(item, index) in selectMenuList"
            :key="index"
          >
            <div class="container-right2-content-img">
              <img :src="item.icon" alt="" />
            </div>
            <div class="box flex-column-between">
              <span class="box-title">{{ item.name }}</span>
              <div class="box-type flex-row-between">
                <span class="box-type-left">{{
                  item.charge_type == 0
                    ? "免费"
                    : item.charge_type == 1
                    ? "限时免费"
                    : item.fee
                }}</span>
                <div class="box-type-btn flex-row-start">
                  <div
                    class="btn flex-center"
                    :class="item.status == 0 ? 'disBtn' : ''"
                    @click="use(item)"
                  >
                    使用
                  </div>
                </div>
              </div>
              <span class="box-time" v-if="item.charge_type == 1"
                >2023.11.13-2012.12.20</span
              >
              <div class="box-line" v-if="item.charge_type == 1"></div>
              <div class="box-content" v-if="item.charge_type == 1">
                服务还有7天过期，<span style="color: #009944">立即续订</span>
              </div>
            </div>

            <div class="yixiajia" v-if="item.status == 0">
              <img src="./image/yixiajia.png" alt="" />
            </div>
          </div>
          <!-- <div class="loading flex-row-center" @click="getNextData">
            {{ loading }}
            <i
              style="margin-left: 6px"
              :class="
                loading == '加载中'
                  ? 'el-icon-loading'
                  : loading == '暂无更多应用'
                  ? ''
                  : 'el-icon-arrow-down'
              "
            ></i>
          </div> -->
        </div>
        <div class="container-right3" v-else-if="activeIndex == '应用订单'">
          <div class="container-right3-title">
            <span>应用管理</span> /
            <span style="color: #303030">应用订单</span>
          </div>
          <div class="container-right3-box">
            <!-- 搜索条件 -->
            <el-row :gutter="20">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-col :span="6"
                  ><div class="search">
                    <el-form-item label="">
                      <el-input
                        v-model="formInline.order_sn"
                        placeholder="请输入订单编号"
                        clearable
                        @input="changeInput"
                      ></el-input>
                    </el-form-item></div
                ></el-col>
                <el-col :span="6"
                  ><div class="search">
                    <el-form-item label="">
                      <el-input
                        v-model="formInline.name"
                        placeholder="请输入服务/应用名称"
                        clearable
                        @input="changeInput"
                      ></el-input>
                    </el-form-item></div
                ></el-col>
                <el-col :span="12"
                  ><div class="search">
                    <el-form-item label="">
                      <el-date-picker
                        v-model="formInline.ctdates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="创建开始日期"
                        end-placeholder="创建截止日期"
                        clearable
                        value-format="yyyy-MM-dd"
                        @change="getAppOrders"
                      >
                      </el-date-picker>
                    </el-form-item></div
                ></el-col>
              </el-form>
            </el-row>

            <!-- 表头 -->
            <div class="border">
              <span style="text-align: left">应用信息</span>
              <span>订购量/周期</span>
              <span>实付金额(元)</span>
              <span>交易状态</span>
              <span>操作</span>
            </div>

            <!-- 内容 -->
            <div
              class="content"
              v-for="(item, index) in allmenuList"
              :key="index"
            >
              <!-- 内容上部分 -->
              <div class="content-top flex-row-between">
                <span
                  >{{ item.created_at | convert }} 订单编号：{{
                    item.order_sn
                  }}</span
                >
                <span>{{ item.cat_name }}</span>
              </div>
              <!-- 内容下部分 -->
              <div class="content-bottom">
                <div class="content-bottom-first flex-row-start">
                  <div class="content-bottom-first-img">
                    <img class="img" :src="item.icon" alt="" />
                  </div>
                  <div class="content-bottom-first-context flex-column-between">
                    <span class="title">{{ item.name }}</span>
                    <span class="type">{{
                      item.charge_type == 0
                        ? "免费"
                        : item.charge_type == 1
                        ? "限时免费"
                        : item.fee
                    }}</span>
                    <span class="time">永久</span>
                  </div>
                </div>
                <div class="content-bottom-second flex-row-center">-</div>
                <div class="content-bottom-second flex-row-center">
                  {{ item.order_amount }}
                </div>
                <div class="content-bottom-second flex-row-center">
                  {{ item.status_desc }}
                </div>
                <div class="content-bottom-second flex-row-end">
                  <div
                    class="btn flex-center"
                    :class="item.status == 0 ? 'disBtn' : ''"
                    @click="use(item)"
                  >
                    立即使用
                  </div>
                </div>

                <div class="yixiajia" v-if="item.status == 0">
                  <img src="./image/yixiajia.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :with-header="false"
      :visible.sync="drawer"
      direction="rtl"
      :append-to-body="true"
      size="47%"
    >
      <speci-fics
        :content="detaliItem"
        @closeDrawer="closeDrawers"
        @openMoveDrawer="openMoveDrawers"
      ></speci-fics>
    </el-drawer>

    <el-drawer
      :with-header="false"
      :visible.sync="nativeDrawer"
      direction="rtl"
      :append-to-body="true"
      size="47%"
    >
      <native-box :content="detaliItem"></native-box>
    </el-drawer>

    <!-- 小精灵抽屉 -->
    <el-drawer
      :with-header="false"
      :visible.sync="littleelfDrawer"
      direction="rtl"
      :append-to-body="true"
      size="47%"
    >
      <littleelf-box></littleelf-box>
    </el-drawer>

    <el-drawer
      :with-header="false"
      :visible.sync="moveDrawer"
      direction="rtl"
      :append-to-body="true"
      size="47%"
    >
      <move-box :content="detaliItem" @closeMove="closeMoves"></move-box>
    </el-drawer>
  </div>
</template>

<script>
import { debounce, throttle } from "@/utils/debounce.js";
import * as applicationApi from "@/api/kitchen/kitchen";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import CardBox from "./components/CardBox.vue";
import SpeciFics from "./components/SpeciFics.vue";
import NativeBox from "./components/NativeBox.vue";
import MoveBox from "./components/MoveBox.vue";
import littleelfBox from "./components/littleelfBox.vue";

import { mapState } from "vuex";
export default {
  inject: ["closeDrawer"],
  components: { CardBox, SpeciFics, NativeBox, MoveBox , littleelfBox },
  data() {
    return {
      list: [
        {
          name: "最近使用",
          icon: "alluse",
          id: "use",
        },
        {
          name: "平台对接",
          icon: "platform",
          id: "platform",
        },
        {
          name: "商品",
          icon: "shops",
          id: "shop",
        },
        {
          name: "订单",
          icon: "orders",
          id: "order",
        },
        {
          name: "采购",
          icon: "procures",
          id: "procure",
        },
        {
          name: "客户",
          icon: "customs",
          id: "custom",
        },
        {
          name: "分拣",
          icon: "sortings",
          id: "sorting",
        },
        {
          name: "财务",
          icon: "finances",
          id: "finance",
        },
        {
          name: "移动办公",
          icon: "moves",
          id: "official",
        },
        {
          name: "更多",
          icon: "mores",
          id: "more",
        },
      ],
      list2: [
        {
          name: "我的应用",
          icon: "alluseExe",
        },
        {
          name: "应用订单",
          icon: "alluseorder",
        },
      ],
      options: [
        {
          value: "",
          label: "所有应用",
        },
      ],
      // 初始值
      value: "",

      contentList: null,

      activeIndex: "最近使用",

      // 未选中滤镜
      noSelect:
        "invert(51%) sepia(2%) saturate(12%) hue-rotate(26deg) brightness(98%) contrast(95%)",
      // 选中的背景颜色
      background: "#def0e5",

      centerDialogVisible: true,

      // 所有订购的应用
      allmenuList: [],
      // 当前类型过滤出来的应用
      selectMenuList: [],
      loading: "剩余应用", // 当我的应用数据超过当前展示数据时，该字段为"剩余应用"，否则为"暂无更多应用"，点击后变更为"加载中"

      drawer: false,
      detaliItem: null,

      formInline: {
        order_sn: null, // 订单编号
        name: null, // 服务/应用名称
        ctdate: null, // 订单创建的开始和截至日期
        ctdates: [],
      },

      nativeDrawer: false, // 打开本项目某个页面的模态框
      moveDrawer: false, // 打开移动办公的模态框
      littleelfDrawer: false, // 小精灵支付模态框
    };
  },
  computed: {
    ...mapState("kitchenCatering", ["kitchenList"]),
  },
  mounted() {
    document.getElementById("container").addEventListener("scroll", (e) => {
      // 获取当前滚动的顶部位置
      let scrollTop = e.target.scrollTop;
      // 初始化活动section的名称
      let activeIndex = null;
      // 遍历所有section的位置信息
      this.sectionPositions.some((section, index) => {
        // 如果滚动位置在当前section的顶部和底部之间
        if (scrollTop >= section.top && scrollTop < section.top + section.height) {
          activeIndex = section.name;
          // 返回true以提前结束循环
          return true;
        }
        // 如果当前位置不在任何section内，则返回false
        return false;
      });
      // 如果找到了活动的section
      if (activeIndex !== null) {
        // 更新活动section的名称
        this.activeIndex = activeIndex;
      }
    });
  },
  filters: {
    convert(value) {
      let time = new Date(value * 1000);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let hour = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second)
      );
    },
  },
  async created() {
    // 获取应用数据
    await this.getList();
    this.initSectionPositions();
    // 将菜单过滤出来,给我的应用中下拉框使用
    let lists = this.list
      .filter((item) => item.name != "最近使用")
      .map((item, index) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    this.options = [...this.options, ...lists];
  },
  methods: {
    // 初始化每个section的位置信息
    initSectionPositions(){
      // 获取所有具有class "section"的DOM元素
      let sections = document.querySelectorAll(".section");
      // 清空section位置信息数组
      this.sectionPositions = [];
      sections.forEach((section, index) => {
        //  section的位置信息，包括：
        // - name: section的名称，从data-section属性中获取
        // - top: section的顶部距离文档顶部的位置，减去25作为偏移
        // - height: section的高度
        this.sectionPositions[index] = {
          name: section.dataset.section,
          top: section.offsetTop - 25,
          height: section.offsetHeight
        };
      });
    },
    // 获取应用数据
    getYingYongList() {
      return new Promise((resolve, reject) => {
        let data = {
          per_page: 1000, // 与后端交流过，固定写死一个每页数量字段
        };
        let query = this.packageApi(data);
        applicationApi.getYingYongList(query).then((res) => {
          if (res.errcode == 0) {
            let list = res.data.list.data;
            resolve(list);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },
    // 获取最近使用列表
    getLatestAppList() {
      return new Promise((resolve, reject) => {
        let query = this.packageApi();
        applicationApi.getLatestApp(query).then((res) => {
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },
    async getList() {
      let getYingYongList = this.getYingYongList();
      let getLatestAppList = this.getLatestAppList();
      await Promise.all([getYingYongList, getLatestAppList]).then((res) => {
        // 将最近使用内的状态is_my_app都改为false
        let children = res[1].map((item) => {
          item.is_my_app = true;
          return item;
        });
        // 定义一个最近使用格式
        let data = {
          id: 9,
          name: "最近使用",
          children,
        };
        let list = res[0];

        // 将对象转为数组
        let newList = [];
        for (let i in list) {
          newList.push(list[i]);
        }
        // 将更多移至最后
        newList.push(newList.shift());
        let contentList = [];
        newList.unshift(data);
        newList.forEach((item) => {
          this.list.forEach((items) => {
            if (item.name == items.name) {
              let data = {
                pid: items.id,
              };
              // 将两个对象合并起来后追加至contentList内
              let dist = this._.merge(item, data);
              contentList.push(dist);
            }
          });
        });
        this.contentList = contentList;
      });
    },
    changeItem(item) {
      if(item.name == this.activeIndex) return;
      if (item.name == "我的应用") {
        let data = {
          app_type: "-1",
        };
        let query = this.packageApi(data);
        applicationApi.getMyApp(query).then((res) => {
          if (res.errcode == 0) {
            let list = res.data;
            this.selectMenuList = list;
          }
        });
      } else if (item.name == "应用订单") {
        this.getAppOrders();
      }else {
        // 获取被点击元素的内文本，这通常代表了要滚动到的section的名称
        const targetName = item.name;
        // 从存储的section位置信息中查找与点击元素名称匹配的section位置
        const targetPosition = this.sectionPositions.find(section=> section.name == targetName);
        // 如果找到了对应的section位置
        if(targetPosition){
          // 滚动到目标section的位置
          document.querySelector("#container").scrollTop = targetPosition.top;
        }
      }
      this.activeIndex = item.name;
    },
    // 获取应用订单列表数据
    getAppOrders() {
      this.formInline.ctdate = this.formInline.ctdates.join("_");
      let data = {
        order_sn: this.formInline.order_sn,
        name: this.formInline.name,
        ctdate: this.formInline.ctdate,
      };
      let query = this.packageApi(data);
      applicationApi.getAppOrder(query).then((res) => {
        if (res.errcode == 0) {
          console.log(res.data);
          let list = res.data;
          this.allmenuList = list;
        }
      });
    },
    // 切换我的应用中的选项数据
    changeOptions(e) {
      let pid = null;
      if (this.value != "") {
        pid = this.contentList.filter((item) => item.pid == this.value)[0].id;
      } else {
        pid = "-1";
      }
      let data = {
        app_type: pid,
      };
      let query = this.packageApi(data);
      applicationApi.getMyApp(query).then((res) => {
        if (res.errcode == 0) {
          let list = res.data;
          this.selectMenuList = list;
        }
      });
    },
    // 加载
    getNextData() {
      if (this.loading == "暂无更多应用") return;
      this.loading = "加载中";
      setTimeout(() => {
        this.loading = "暂无更多应用";
      }, 2000);
    },

    // 卡片中点击立即订购
    orders(data) {
      this.drawer = true;
      this.detaliItem = data;
    },
    // 关闭模态框
    closeDrawers() {
      this.drawer = false;
      this.getList();
    },
    closeMoves() {
      this.moveDrawer = false;
      this.getList();
    },
    // 立即使用
    use(item) {
      if (item.status == 0) return;
      if (item.url == "/yongyouT") {
        this.openNativeDrawers(true);
      }else if(item.url == "/xjl") {
        this.openlittleelfDrawers(true);
      } else if (item.url == "/move") {
        this.moveDrawer = true;
        this.detaliItem = item;
      } else if (item.url == "/") {
        window.open(`http://${window.location.host}${item.wap_url}`);
      }
    },
    // 查看教程
    look(item) {
      this.detaliItem = item;
      this.drawer = true;
    },

    // 封装请求的sign和timeStamp字段
    packageApi(data = {}) {
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      return query;
    },
    // 打开模态框2
    openNativeDrawers(data) {
      this.nativeDrawer = data;
    },
    // 打开小精灵模态框
    openlittleelfDrawers(data) {
      this.littleelfDrawer = data;
    },
    // 打开移动办公的模态框
    openMoveDrawers(data) {
      this.moveDrawer = true;
      this.detaliItem = data;
    },
    // 输入后的回调
    changeInput: debounce(function (e) {
      this.getAppOrders();
    }, 500),
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: calc(100% - 15px);
  height: calc(100vh - 60px);
  background: #fff;
  .box-card {
    height: 100%;
  }
  &-bottom {
    border-top: 1px solid rgba(1px, 0, 0, 0.1);
  }
  &-maodian {
    width: 100%;
    height: 40px;
    line-height: 40px;
    align-items: center;

    &-xuanzhong {
      background: #def0e5;
      color: #009944;
    }

    &-name {
      width: 80px;
      margin-left: 10px;
    }

    &:hover {
      cursor: pointer;
      background: rgb(235, 247, 239);
    }
  }

  &-right {
    width: 100%;
    height: 100%;
    padding: 33px 22px;
    overflow: auto;
    .section{
      padding-bottom: 19px;
    }
    &-list {
      margin-top: 28px;
      &-box {
        margin-bottom: 10px;
      }
    }
  }
  &-right2 {
    width: 100%;
    height: 100%;
    padding: 33px 22px;
    overflow: auto;
    &-title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #808080;
    }
    /deep/.el-input__inner {
      border: none;
      width: 100px;
      padding-left: 0;
      height: 19px;
      color: #303030;
    }
    /deep/.el-input__suffix {
      display: flex;
      align-items: center;
    }
    /deep/.el-input--small {
      font-size: 14px;
    }
    &-box {
      width: 100%;
      height: 50px;
      background: #f2f3f5;
      align-items: center;
      padding: 0 0 0 19px;
      box-sizing: border-box;
      margin-top: 19px;
      &-left {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303030;
      }
      &-right {
        width: 168px;
      }
    }
    &-content {
      width: 100%;
      padding: 17px 0 17px 15px;
      border-bottom: 1px solid #dfdfdf;
      align-items: flex-start;
      position: relative;

      .yixiajia {
        position: absolute;
        right: 0;
        top: 0;
        width: 44px;
        height: 44px;
        img {
          width: 44px;
          height: 44px;
        }
      }

      &-img {
        width: 70px;
        height: 70px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .box {
        width: 100%;
        margin-left: 14px;
        &-title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #303030;
        }
        &-type {
          align-items: center;
          &-left {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
          }
          &-btn {
            align-items: center;
            margin-right: 10%;
            .btn {
              width: 80px;
              height: 30px;
              background: #ffffff;
              border: 1px solid #dfdfdf;
              border-radius: 4px;
              line-height: 30px;
              text-align: center;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
              padding: 0 !important;
            }
            .disBtn {
              background: #f5f5f5;
              cursor: not-allowed;
            }
            .btn:nth-child(2) {
              margin-left: 8px;
            }
            &:hover {
              cursor: pointer;
            }
          }
        }
        &-time {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #808080;
        }
        &-line {
          width: 100%;
          height: 1px;
          background: #dfdfdf;
          margin-top: 10px;
        }
        &-content {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #808080;
          margin-top: 16px;
        }
      }
    }

    .loading {
      width: 100%;
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 21px;
      align-items: center;
      &:hover {
        cursor: pointer;
      }
    }
  }

  &-right3 {
    width: 100%;
    height: 100%;
    padding: 33px 22px;
    overflow: auto;
    &-title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #808080;
    }
    &-box {
      margin-top: 30px;
      .search {
        width: 100%;
        /deep/.el-form-item--small.el-form-item {
          width: 100%;
          margin-bottom: 10px;
        }
        /deep/.el-form-item__content,
        .el-input {
          width: 100%;
        }

        /deep/.el-range-editor--small.el-input__inner {
          width: 100%;
        }
      }
      .border {
        width: 100%;
        height: 50px;
        display: grid;
        grid-template-columns: 40% 15% 15% 15% 15%;
        grid-template-rows: 50px;
        line-height: 50px;
        padding: 0 20px;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303030;
        margin-top: 10px;
        background: #f2f3f5;
        border-radius: 6px;
      }

      .content {
        width: 100%;
        margin-top: 10px;
        &-top {
          align-items: center;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          height: 40px;
          line-height: 40px;
          background: #fafbfa;
          border: 1px solid #f5f5f5;
          padding: 0 15px;
          border-radius: 6px 6px 0px 0px;
        }
        &-bottom {
          display: grid;
          padding: 15px;
          grid-template-columns: 40% 15% 15% 15% 15%;
          background: rgba(255, 255, 255, 0);
          border: 1px solid #f5f5f5;
          position: relative;

          .yixiajia {
            position: absolute;
            right: 0;
            top: 0;
            width: 44px;
            height: 44px;
            img {
              width: 44px;
              height: 44px;
            }
          }

          &-first {
            &-img {
              width: 70px;
              height: 70px;
              min-width: 70px;
              .img {
                width: 100%;
                height: 100%;
              }
            }
            &-context {
              height: 70px;
              margin-left: 14px;
              .title {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #303030;
              }
              .type {
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #808080;
              }
              .time {
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #808080;
              }
            }
          }
          &-second {
            height: 70px;
            line-height: 70px;
            width: 100%;
            align-items: center;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            .btn {
              width: 80px;
              height: 30px;
              background: #ffffff;
              border: 1px solid #dfdfdf;
              border-radius: 4px;
              &:hover {
                cursor: pointer;
              }
            }
            .disBtn {
              background: #f5f5f5;
              &:hover {
                cursor: not-allowed !important;
              }
            }
          }
        }
      }
    }
  }
}

/deep/.el-row,
.el-col {
  height: 100%;
}
/deep/ .el-card__body,
.el-main {
  padding: 10px 0 0 0;
}

/deep/.el-card__body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wid20 {
  width: 25px !important;
  height: 20px !important;
}
.wid25 {
  width: 25px !important;
  height: 25px !important;
}
</style>
